import React, { useState } from "react";

import { Card, Input, Button, Spin, message } from "antd";
import { UserOutlined, KeyOutlined } from "@ant-design/icons";
import "antd/dist/antd.css";

import "../static/css/login.css";

import axios from "axios";
import servicePath from "../config/apiUrl";

function Login() {
  const [userName, setUserName] = useState("alomy");
  const [password, setPassword] = useState("alomyalomy");
  const [IsLoading, setIsLoading] = useState(false);
  const checkLogin = () => {
    if (!userName) {
      message("用户名不能为空");
      return false;
    } else if (!password) {
      message("密码不能为空");
      return false;
    }
    setIsLoading(true);
    let dataProps = { userName, password };
    axios({
      method: "POST",
      url: servicePath.checkLogin,
      data: dataProps,
      withCredentials: true,
    }).then((res) => {
      setIsLoading(false);
      console.log(res);
    });
  };

  return (
    <div className="login-div">
      <Spin tip="Loading..." spinning={IsLoading}>
        <Card title="Alomy Blog System" style={{ width: 400 }}>
          <Input
            value={userName}
            onChange={(e) => setUserName(e.target.value)}
            id="userName"
            size="large"
            placeholder="Please input user nameName"
            prefix={<UserOutlined style={{ color: "rgba(0,0,0,.25)" }} />}
          />
          <Input.Password
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            id="password"
            size="large"
            placeholder="Please input your password"
            prefix={<KeyOutlined style={{ color: "rgba(0,0,0,.25)" }} />}
            style={{ margin: "20px 0" }}
          />
          <Button onClick={checkLogin} type="primary" block size="large">
            Login in
          </Button>
        </Card>
      </Spin>
    </div>
  );
}

export default Login;
